import {Component, OnInit, ViewChild, ElementRef, Renderer2} from '@angular/core';
import {ApplicationService} from '../../../service/application.service';
import {Router, NavigationEnd} from '@angular/router';

@Component({
  selector: 'app-navigation-background',
  templateUrl: './navigation-background.component.html',
  styleUrls: ['./navigation-background.component.css']
})
export class NavigationBackgroundComponent implements OnInit {
  @ViewChild('qu', {static: true})
  qu: ElementRef;
  showBg: boolean = false;

  constructor(
    private application: ApplicationService,
    private renderer: Renderer2,
    private router: Router
  ) {
  }

  ngOnInit() {
    this.router.events.filter(event => event instanceof NavigationEnd)  // 筛选原始的Observable：this.router.events
      .subscribe((event: NavigationEnd) => {
        if (event.url.indexOf('main') > -1) {
          this.showBg = true;
        } else {
          this.showBg = false;
        }
      });
    if (window.location.href.indexOf('main') > -1) {
      this.showBg = false;
    }
    this.showBg = true
    let mapUrl = 'url(' + 'assets/images/' + this.application.appConfigData.appCompany + '.png' + ') no-repeat center';
    this.renderer.setStyle(this.qu.nativeElement, 'background', mapUrl);
    this.renderer.setStyle(this.qu.nativeElement, 'background-size', 'auto 100%');
    if (this.application.currentApplicationParams && this.application.currentApplicationParams['bgPosition']) {
      const bgPosition = this.application.currentApplicationParams['bgPosition'].paramValue;
      let bgPositionSplit = bgPosition.split(';');
      if (bgPositionSplit.length <= 1) {
        bgPositionSplit = bgPosition.split(';');
      }
      this.renderer.setStyle(this.qu.nativeElement, 'top', bgPositionSplit[0] + '%');
      this.renderer.setStyle(this.qu.nativeElement, 'left', bgPositionSplit[1] + '%');
      this.renderer.setStyle(this.qu.nativeElement, 'transform', `scale(${bgPositionSplit[2]})`);
    }
  }
}

